<template>
    <h1>个人信息</h1>
    姓：<input type="text" v-model="person.firstName">
    <br>
    名：<input type="text" v-model="person.lastName">
    <br>
    <span>全名：{{ person.fullName }}</span>
    <br>
    全名：<input type="text" v-model="person.fullName">
    <br>
    <p style="text-align: left;border-top: 1px solid #000;">
        Vue3 中的计算函数（computed） 是以组合式API 的形式存在，需要引入后才能使用。分为简写和完整两种写法
    </p>
</template>

<script lang="ts">
import { reactive, computed } from 'vue'

export default {
    name: 'ComputedDemo',
    setup() {

        // 数据（响应式）
        let person = reactive({
            firstName: '张',
            lastName: '三',
        })
        // 计算属性-简写
        /**该写法会造成变量 fullName 被计算生成后无法修改 */
        // person.fullName = computed(()=>{
        //     return person.firstName + '-' + person.lastName
        // })

        // 计算属性-完整
        person.fullName = computed({
            get(){
                return person.firstName + '-' + person.lastName
            },
            set(value){
                const nameArr = value.split('-')
                person.firstName = nameArr[0]
                person.lastName = nameArr[1]
            }
        })


        // 方法

        return {
            person,

        }
    }
} 
</script>
<style></style>